<template>
  <div class="test-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>API 测试页面</span>
        </div>
      </template>
      
      <el-space direction="vertical" style="width: 100%">
        <el-button type="primary" @click="testBackendConnection" :loading="testing">
          <el-icon><Connection /></el-icon>
          测试后端连接
        </el-button>
        
        <el-card v-if="testResult">
          <template #header>
            <span>测试结果</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="状态">
              <el-tag :type="testResult.success ? 'success' : 'danger'">
                {{ testResult.success ? '成功' : '失败' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="响应码">
              {{ testResult.code }}
            </el-descriptions-item>
            <el-descriptions-item label="消息">
              {{ testResult.message }}
            </el-descriptions-item>
            <el-descriptions-item label="时间戳">
              {{ testResult.timestamp ? new Date(testResult.timestamp).toLocaleString() : '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <el-divider />
        
        <el-button type="success" @click="loadTasksTest" :loading="loadingTasks">
          <el-icon><List /></el-icon>
          测试获取任务列表
        </el-button>
        
        <el-card v-if="tasksResult">
          <template #header>
            <span>任务列表测试结果</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="状态">
              <el-tag :type="tasksResult.success ? 'success' : 'danger'">
                {{ tasksResult.success ? '成功' : '失败' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="响应码">
              {{ tasksResult.code }}
            </el-descriptions-item>
            <el-descriptions-item label="消息">
              {{ tasksResult.message }}
            </el-descriptions-item>
            <el-descriptions-item label="数据条数">
              {{ tasksResult.data ? tasksResult.data.length : 0 }}
            </el-descriptions-item>
          </el-descriptions>
          
          <el-divider />
          
          <el-table v-if="tasksResult.data" :data="tasksResult.data" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="status" label="状态" />
            <el-table-column prop="assignee" label="负责人" />
          </el-table>
        </el-card>
      </el-space>
    </el-card>
  </div>
</template>

<script>
import { taskApi } from '../api/taskApi'
import { ElMessage } from 'element-plus'

export default {
  name: 'TestPage',
  data() {
    return {
      testing: false,
      loadingTasks: false,
      testResult: null,
      tasksResult: null
    }
  },
  methods: {
    async testBackendConnection() {
      this.testing = true
      this.testResult = null
      
      try {
        const response = await taskApi.test()
        this.testResult = {
          success: true,
          code: response.code,
          message: response.message,
          timestamp: response.timestamp
        }
        ElMessage.success('后端连接测试成功')
      } catch (error) {
        this.testResult = {
          success: false,
          code: error.response?.status || 'N/A',
          message: error.message || '连接失败',
          timestamp: null
        }
        ElMessage.error('后端连接测试失败')
        console.error(error)
      } finally {
        this.testing = false
      }
    },
    
    async loadTasksTest() {
      this.loadingTasks = true
      this.tasksResult = null
      
      try {
        const response = await taskApi.getAllTasks()
        this.tasksResult = {
          success: response.code === 200,
          code: response.code,
          message: response.message,
          data: response.data
        }
        ElMessage.success('获取任务列表测试成功')
      } catch (error) {
        this.tasksResult = {
          success: false,
          code: error.response?.status || 'N/A',
          message: error.message || '请求失败',
          data: null
        }
        ElMessage.error('获取任务列表测试失败')
        console.error(error)
      } finally {
        this.loadingTasks = false
      }
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>